<template>
    <el-select v-model="value" v-bind="$attrs" :loading="loading" :remote-method="remoteMethod" :remote="remote"
        :filterable="filterable" :multiple-limit="multiplyLimit" @change="handleChange">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
</template>
<script>
export default {
    name: 'SearchSelect',
    props: {
        reserveKeyword: {
            type: Boolean,
            default: false
        },
        filterable: {
            type: Boolean,
            default: true
        },
        remote: {
            type: Boolean,
            default: true
        },
        multiplyLimit: {
            type: Number,
            default: 10
        },
        remoteApi: {
            type: Function,
            default: function (query) {
            }
        },

    },
    data() {
        return {
            loading: false,
            filterable: true,
            options: [],
            value: []
        }
    },
    mounted() {
        this.loading = true
        this.remoteApi().then(({ data = [] }) => {
            this.options = data
            this.loading = false
        })
    },
    methods: {
        remoteMethod(keyword) {
            this.loading = true
            this.remoteApi({ keyword }).then(({ data = [] }) => {
                this.options = data
                this.loading = false
            })
        },
        handleChange(data) {
            this.$emit('handleChange', data)
        }
    },

}
</script>
<style lang="scss" scoped></style>